<template>
	<view class="mainContainer" :style="{ paddingTop: headerHeight + 'px' }">
		<CustomHeader @height-change="onHeaderHeightChange" />
		<view class="container">
			<view class="swiper-wrapper" :style="{ height: 'calc(100vh - ' + headerHeight + 'px - 150rpx)' }" id="swiper-section">
				<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" @change="onSwiperChange">
					<swiper-item class="swiper-item1" v-for="item in bannerList" :key="item.id">
						<image :src="item.resUrl" mode="aspectFill" />
						<!-- 第一张图片的文字 -->
						<view class="slide-title">
							<text class="title-chinese">{{ item.desc.titleData }}</text>
						</view>
						<view class="slide-event-info">
							<text class="event-text">{{ item.desc.eventData }}</text>
						</view>
						<image v-if="item.linkType === 2" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/home/navigate.png" mode="widthFix" class="arrow-icon" @click="towebview(item.link)" />
					</swiper-item>
				</swiper>
				
				
				<view class="progress-container" v-if="showProgress">
					<view class="progress-bar animate"></view>
				</view>
			</view>
		</view>
		<CustomTabBar :activeIndex="2"  />
	</view>
</template>

<script>
	import CustomTabBar from '@/components/CustomTabBar.vue'
	import CustomHeader from '@/components/CustomHeader.vue'
	import { homeApi } from '@/request/home'
	export default {
		components: { CustomTabBar, CustomHeader },
		data() {
			return {
				showProgress: true,
				swiperHeight: 0,
				headerHeight: 0,
				bannerList: []
			}
		},
		methods: {
			onHeaderHeightChange(height) {
				this.headerHeight = height;
			},
			onSwiperChange(e) {
				this.showProgress = false;
				this.$nextTick(() => {
					this.showProgress = true;
				});
			},
			getBannerList() {
				homeApi.getBannerList().then(res => {
					res.forEach(e => {
						e.desc = e.desc && JSON.parse(e.desc);
					});
					this.bannerList = res;
				});
			},
			towebview(link) {
				uni.navigateTo({
					url: '/pages/webview/index?url=' + link
				});
			}
		},
		mounted() {
			this.showProgress = true;
			this.getBannerList();
		},
	}
</script>

<style lang="scss" scoped>
	.mainContainer {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		.container {
			flex: 1;
			margin-bottom: 150rpx;
		}
	}
	.container {
		.swiper-wrapper {
			position: relative;
			height: 100%;
		}


		.arrow {
			position: absolute;
			bottom: 54rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 26rpx;
			z-index: 3;
		}
		.swiper {
			height: 100%;
			text-align: center;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 2;
				object-fit: cover;
			}

			.swiper-item1, .swiper-item2 {
				position: relative;
				width: 100%;
				height: 100%;
				
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-size: cover;
					background-position: center;
					filter: blur(20rpx);
					opacity: 0.8;
					z-index: 1;
				}
				
				/* 每个滑动项的标题样式 */
				.slide-title {
					position: absolute;
					top: 114rpx;
					left: 64rpx;
					z-index: 10;
					
					.title-chinese {
						display: block;
						font-size: 40rpx;
						font-weight: bold;
						color: #ffffff;
						line-height: 2;
						text-align: left;
						// text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
					}
					
				}
				
				/* 每个滑动项的活动信息样式 */
				.slide-event-info {
					position: absolute;
					bottom: 240rpx;
					left: 66rpx;
					z-index: 10;
					
					.event-text {
						display: block;
						font-size: 24rpx;
						color: #ffffff;
						line-height: 1.5;
						text-align: left;
						text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
					}
				}
						
		/* 右下角圆形箭头按钮 */
			.arrow-icon {
				width: 82rpx;
				position: absolute;
				bottom: 240rpx;
				right: 60rpx;
				z-index: 10;
			}
			}
		}
		
		.progress-container {
			position: absolute;
			bottom: 124rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 40%;
			height: 4rpx;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 2rpx;
			overflow: hidden;
			z-index: 3;
			
			.progress-bar {
				height: 100%;
				background-color: #ffffff;
				width: 0;
				
				&.animate {
					animation: progress 3s linear forwards;
				}
			}
		}

	}
	
	@keyframes progress {
		0% {
			width: 0;
		}
		100% {
			width: 100%;
		}
	}
</style>
